<template>
  <div>
    <h1>【aty-tabs】 component demo</h1>
    <p>【aty-tabs】 本质</p>
    <aty-title level="4">1.基础用法,当前选中({{selected1}})</aty-title>
    <aty-tabs v-model="selected1" splitScreen splitScreenStatus>
      <aty-tabpane label="页签1" name="p1" splitScreenPosition="left">页签1内容</aty-tabpane>
      <aty-tabpane label="页签2" name="p2" icon="social-apple" splitScreenPosition="left">页签2内容</aty-tabpane>
      <aty-tabpane label="页签3" name="p3" splitScreenPosition="left">页签3内容</aty-tabpane>
      <aty-tabpane label="页签4" name="p4" splitScreenPosition="right">页签4内容</aty-tabpane>
      <aty-tabpane label="页签5（禁用）" name="p5" splitScreenPosition="right">页签5内容,当前页签禁用</aty-tabpane>
      <aty-tabpane label="页签6" name="p6" icon="social-windows" splitScreenPosition="right">页签6内容</aty-tabpane>
    </aty-tabs>
    <aty-title level="4">2.卡片、可关闭</aty-title>
    <aty-tabs type="card">
      <aty-tabpane label="页签1" closable>label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2">label="页签2"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">3.自定义label</aty-title>
    <aty-tabs>
      <aty-tabpane>
        <div slot="label">
          <span>自定义内容</span>
          <aty-badge :count="badgeCount(111)" />
          <span>测试</span>
        </div>
      </aty-tabpane>
      <aty-tabpane label="页签2">label="页签2"</aty-tabpane>
      <aty-tabpane label="页签3">label="页签3"</aty-tabpane>
      <aty-tabpane label="页签4">label="页签4"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">4.动态添加不同内容</aty-title>
    <aty-tabs>
      <aty-button slot="extra" @click="addType1('第一类页签')">增加第一种</aty-button>
      <aty-button slot="extra" @click="addType2('第二类页签')">增加第二种</aty-button>
      <aty-tabpane label="页签1">页签1</aty-tabpane>
      <div :is="item.component" v-for="(item,index) in items" :key="index" :data="item.data" :pane="item.pane" />

    </aty-tabs>

    <aty-title level="4">5.iframe</aty-title>
    <aty-tabs>
      <aty-tabpane label="页签1" closable />
      <aty-tabpane label="页签2" src="http://www.thunisoft.com/legaltechconf/index.jhtml#jbzl" />
      <aty-tabpane label="页签3" src="http://www.thunisoft.com/gsjj.jhtml">label="页签3"</aty-tabpane>
      <aty-tabpane label="页签4">label="页签4"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">6.位置(左, 卡片)</aty-title>
    <aty-tabs type="card" position="left" class="left-7">
      <aty-tabpane label="文字很多很多很多很多很多">label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2" closable>label="页签2"</aty-tabpane>
      <aty-tabpane label="页签3" src="http://www.thunisoft.com/gsjj.jhtml">label="页签3"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">7.位置(右)</aty-title>
    <aty-tabs :animated="true" position="right">
      <aty-tabpane label="页签1">label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2">label="页签2"</aty-tabpane>
      <aty-tabpane label="页签3">label="页签3"</aty-tabpane>
      <aty-tabpane label="页签4">label="页签4"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">8.位置(下)</aty-title>
    <aty-tabs position="bottom" type="card">
      <aty-tabpane label="文字很多很多很多很多很多">label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2">label="页签2"</aty-tabpane>
      <aty-tabpane label="页签3">label="页签3"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">9.共享iframe</aty-title>
    <aty-tabs type="card" :shareframe="true" :value="1">
      <aty-tabpane label="文字很多很多很多很多很多" src="http://www.thunisoft.com/gsjj.jhtml">label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2" src="http://www.thunisoft.com/rjkffw.jhtml#skip_0">label="页签2"</aty-tabpane>
      <aty-tabpane label="页签3" src="http://www.thunisoft.com/legaltechconf/index.jhtml#jbzl">label="页签3"</aty-tabpane>
    </aty-tabs>

    <aty-title level="4">10.占位</aty-title>
    <aty-tabs type="card">
      <aty-tabpane label="页签1">label="页签1"</aty-tabpane>
      <aty-tabpane label="页签2">label="页签2"</aty-tabpane>
      <aty-tabspace label="占位">占位</aty-tabspace>
      <aty-tabpane label="页签3">label="页签3"</aty-tabpane>
    </aty-tabs>
    <aty-title level="4">11.可分屏</aty-title>
    <aty-button @click="changeSplited">切换</aty-button>
    <aty-splitable-tabs v-model="selected2" :splited="splited" type="trapezoid">
      <aty-tabpane label="页签1" name="p1" splitPosition="left">
        <div slot="label">
          <span>自定义内容</span>
          <aty-badge :count="badgeCount(111)" />
          <span>测试</span>
        </div>
      </aty-tabpane>
      <aty-tabpane label="页签2" name="p2" icon="social-apple" splitPosition="left">页签2内容</aty-tabpane>
      <aty-tabpane label="页签3" name="p3" splitPosition="left">页签3内容</aty-tabpane>
      <aty-tabspace label="占位" splitPosition="left">占位</aty-tabspace>
      <aty-tabpane label="页签4" name="p4" splitPosition="right">页签4内容</aty-tabpane>
      <aty-tabpane label="页签5（禁用）" name="p5" splitPosition="right">页签5内容,当前页签禁用</aty-tabpane>
      <aty-tabpane label="页签6" name="p6" icon="social-windows" splitPosition="right">页签6内容</aty-tabpane>
    </aty-splitable-tabs>

  </div>
</template>
<style>
    .left-7.aty-tabs {
        height: 300px;
    }

    .left-7.aty-tabs .aty-tabs-bar {
        height: 100%;
    }

    .left-7.aty-tabs .aty-tabs-content {
        height: 100%;
    }
</style>
<script>
import Vue from 'vue'

var PeopleContent = Vue.component('PeopleContent', {
  template: '<aty-tabpane :label="pane.label">{{data.message}}</aty-tabpane>',
  props: ['data', 'pane']
})
var DeptComponent = Vue.component('DeptComponent', {
  template: '<aty-tabpane :label="pane.label">{{data.message}}</aty-tabpane>',
  props: ['data', 'pane']
})
export default {
  components: { PeopleContent, DeptComponent },
  data () {
    return {
      selected1: 'p2',
      badge1: 2,
      items: [],
      selected2: ['p1', 'p4'],
      splited: true
    }
  },
  watch: {
    selected2 (value) {
      // console.log(value);
    }
  },
  methods: {
    badgeCount (item) {
      return item.index * 3 + 1
    },
    addCount () {
      this.badge1++
    },
    addType1 (label) {
      this.items.push({
        component: 'PeopleContent',
        pane: {
          label: label,
          icon: '',
          name: null,
          closable: false
        },
        data: {
          message: '测试页签' + name
        }
      })
    },
    addType2 (label) {
      this.items.push({
        component: 'DeptComponent',
        pane: {
          label: label,
          icon: '',
          name: null,
          closable: false
        },
        data: {
          message: '测试页签222222' + name
        }
      })
    },
    changeSplited () {
      this.splited = !this.splited
    }
  }
}
</script>
